<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="div"></div>
    <button id="button1">首页</button>
    <button id="button2">商城</button>
    <button id="button3">购物车</button>
    <button id="button">我的</button>
</body>
<script>
    const button1 = document.querySelector('#button1')
    const button2 = document.querySelector('#button2')
    const button3 = document.querySelector('#button3')
    const button4 = document.querySelector('#button4')

    let _wr = function (type) {
        let orig = history[type]
        return function () {
            let rv = orig.apply(this, arguments)
            let e = new Event(type)
            e.arguments = arguments
            window.dispatchEvent(e)
            return rv
        }
    }

    history.pushState = _wr('pushState')
    history.replaceState = _wr('replaceState')

    button1.addEventListener('click', () => {
        history.pushState({ state: 1 }, null, './home')
    })

    button2.addEventListener('click', () => {
        history.pushState({ state: 2 }, null, './shop')
    })

    button3.addEventListener('click', () => {
        history.pushState({ state: 3 }, null, './shopping-card')
    })

    button4.addEventListener('click', () => {
        history.pushState({ state: 4 }, null, './mine')
    })


    window.addEventListener('pushState', e => {
        //监听pushState自定义事件，拿到上面通过pushState的参数，做出对应的页面渲染，处理的思路于hash实现雷同，这里不展开
        console.log(...e.arguments)
    })
</script>

</html>